<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鑫0615</title>
<!--    编码题：-->
<!--    制作表单验证-->
<!--    创建表单，要求用户名必须是2-20个字母。-->
<!--    密码必须是6位数字。-->
<!--    电子邮件必须是XX@XX.com格式。-->
<!--    电话号码必须是13、15、18开始的11位数字。-->
<!--    生日为XXXX-XX-XX-->

<!--    验证通过可以提交表单，验证失败则不予提交。-->
<!--    思考：如何重用表单验证代码。-->
    <script>

        function $(id){
            return document.getElementById(id);
        }

        function checkName2(){
            var rexp=/^[a-zA-Z]{2,20}$/
            if (rexp.test($("userName").value)){
                $("nameSpan").innerHTML="验证通过";
                $("nameSpan").style.color="green";
                return "成功";
            }
            else {
                $("nameSpan").innerHTML="用户名必须是2-20个字母";
                $("nameSpan").style.color="red";
                return "失败";
            }
        }

        function checkPwd(){
            var rexp=/^[\d]{6}$/
            if (rexp.test($("pwd").value)){
                $("pwdSpan").innerHTML="验证通过";
                $("pwdSpan").style.color="green";
                return "成功";
            }
            else {
                $("pwdSpan").innerHTML="密码必须是6位数字";
                $("pwdSpan").style.color="red";
                return "失败";
            }
        }

        function checkEmail(){
            var rexp=/^[0-9a-zA-Z]{3,}@[0-9a-zA-Z]{2}[.](com)$/
            if (rexp.test($("email").value)){
                $("emailSpan").innerHTML="验证通过";
                $("emailSpan").style.color="green";
                return "成功";
            }
            else {
                $("emailSpan").innerHTML="电子邮件必须是XX@XX.com格式";
                $("emailSpan").style.color="red";
                return "失败";
            }
        }

        function checkPhone(){
            var rexp=/^(13|15|18)\d{9}$/
            if (rexp.test($("phone").value)){
                $("phoneSpan").innerHTML="验证通过";
                $("phoneSpan").style.color="green";
                return "成功";
            }
            else {
                $("phoneSpan").innerHTML="电话号码必须是13、15、18开始的11位数字";
                $("phoneSpan").style.color="red";
                return "失败";
            }
        }

        function checkBirthday(){
            var rexp=/^19\d{2}-(0\d|1[1-2])-([0-2]\d|3[0-1])$/
            if (rexp.test($("birthday").value)){
                $("birthdaySpan").innerHTML="验证通过";
                $("birthdaySpan").style.color="green";
                return "成功";
            }
            else {
                $("birthdaySpan").innerHTML="生日为XXXX-XX-XX";
                $("birthdaySpan").style.color="red";
                return "失败";
            }
        }

        function checkAll(){
            if (checkPhone()=="失败" | checkBirthday()=="失败" | checkName2()=="失败" | checkPwd()=="失败"| checkEmail()=="失败"){
                $("endSpan").innerHTML="格式有误，无法提交";
                $("endSpan").style.color="red";
                return "homework0615.html"
            }
            else {
                // $(button).style.type="submit";
                return "ok.html";
            }
        }
        console.log(window.location.href)
    </script>
</head>
<body>
    <form action="add">
        用户名：<input type="text" name="userName" id="userName" onblur="checkName2()"><span id="nameSpan"></span><br>
        密码：<input type="text" name="pwd" id="pwd" onblur="checkPwd()"><span id="pwdSpan"></span><br>
        电子邮件:<input type="text" name="email" id="email" onblur="checkEmail()"><span id="emailSpan"></span><br>
        电话号码：<input type="text" name="phone" id="phone" onblur="checkPhone()"><span id="phoneSpan"></span><br>
        生日：<input type="text" name="birthday" id="birthday" onblur="checkBirthday()"><span id="birthdaySpan"></span><br>
        <input type="button" value="提交" id="button" onclick="location.href=checkAll()"><span id="endSpan"></span>
    </form>
</body>
</html>